<template>
  <swiper v-if="adlists.length" class="ad-banner" :options="options">
    <swiper-slide v-for="v in adlists" :key="v.adId">
      <img :src="v.adFile | hasdomain" @error="$event.target.src = require('../assets/test/banner.png')" @click="addLink(v.adURL)">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      adlists: [],
      options: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
        }
      }
    };
  },
  methods: {
    getAdlist(){
      this.$http.fetchGet('adlist', {
        adpositionId: 12,
        positionType: 1,
      }).then(({data = []}) => {
        console.log('轮播广告', data);
        this.adlists = data;
      })
    },
    addLink(url) {
      let index = url.indexOf('#')
      this.$router.push({
        path: url.slice(index + 1)
      })
    }
  },
  created() {
    this.getAdlist();
  }
};
</script>

<style lang="less" scoped>
.ad-banner {
  img {
    display: block;
    width: 100%;
    height: 100%;
    .h(412);
  }
  .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    opacity: 0.4;
    background-color: #ffffff;
    &.swiper-pagination-bullet-active{
      opacity: 1;
    }
  }
}
</style>
